<template>
  <div class="more-container">
    <div class="classformarea">
      <el-table :data="tabledatas" border style="width: 100%; margin-top: 10px">
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            <span>
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="scope.row.content"
              ></el-input>
            </span>
            <!-- <span v-else>{{ scope.row.text }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="标题" align="center" width="85">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.isTitle"
              clearable
              size="mini"
              :style="{ width: '97%' }"
            >
              <el-option
                v-for="(item, index) in tiileOption"
                :key="index"
                :label="item.title"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="小标题" align="center" width="85">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.isLittleTitle"
              clearable
              size="mini"
              :style="{ width: '97%' }"
            >
              <el-option
                v-for="(item, index) in istiileOption"
                :key="index"
                :label="item.title"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="加粗" align="center" width="85">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fontWeight"
              clearable
              size="mini"
              :style="{ width: '97%' }"
            >
              <el-option
                v-for="(item, index) in isfontWeightOption"
                :key="index"
                :label="item.title"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center" width="85">
          <template slot-scope="scope">
            <el-color-picker v-model="scope.row.color"></el-color-picker>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="110"
          align="center"
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <el-link
              @click="delect(scope.$index)"
              :underline="false"
              type="primary"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-button
          type="primary"
          @click="confirmbtn"
          size="medium"
          style="margin-top: 20px"
        >
          提 交
        </el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
//获取本地数据
import { worryfree, packageWorryfree } from '@/api/course'

export default {
  data() {
    return {
      //上传8张图片
      tabledatas: [],
      formData: {
        title: '',
      },
      type: 1,
      rules: {},
      //descData
      istiileOption: [
        {
          title: '是',
          id: '1',
        },
        {
          title: '否',
          id: '0',
        },
      ],
      tiileOption: [
        {
          title: '是',
          id: '1',
        },
        {
          title: '否',
          id: '0',
        },
      ],
      isfontWeightOption: [
        {
          title: '是',
          id: 'bold',
        },
        {
          title: '否',
          id: 'normal',
        },
      ],
    }
  },
  components: {},
  created() {
    this.getworryfree()
  },
  methods: {
    async getworryfree() {
      let params = { type: this.type }
      let data = await worryfree(params)
      if (data.code == '0000') {
        this.tabledatas = JSON.parse(data.data.content)
      }
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['classForm'].resetFields()
      this.tabledatas = []
      this.$emit('closedialog')
    },
    renderHeader(h) {
      return (
        <div>
          <el-button type="primary" onClick={this.addAll} class="addbtn">
            新增
          </el-button>
        </div>
      )
    },
    // 单个删除
    delect(index) {
      this.tabledatas.splice(index, 1)
    },
    //批量新增
    addAll() {
      let list = {
        //   show: true,
        content: '',
        isTitle: '0',
        isLittleTitle: '0',
        fontWeight: 'normal',
        color: '#666666',
      }
      this.tabledatas.push(list)
    },
    //点击确认提交表单
    async confirmbtn() {
      let params = {}
      params.type = this.type
      params.content = JSON.stringify(this.tabledatas)
      let data = await packageWorryfree(params)
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
        this.getworryfree()
      }
    },
  },
  mounted() {},
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-color-picker__color {
    border: none;
  }
  .el-color-picker__trigger {
    border: none;
  }
}
.imgDetail {
  width: 100%;
  min-height: 116px;
  max-height: 400px;
  overflow-y: scroll;
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 12px 16px 8px;
  box-sizing: border-box;
  .imgDetail-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 14px;
      line-height: 24px;
      color: #666;
    }
  }
}
.uploaditem {
  position: absolute;
  left: 0;
  top: 0;
}

.tablearea {
  margin-bottom: 20px;
}
::v-deep {
  .uploadimg {
    width: 100%;
    .el-form-item__content {
      width: 100%;
    }
  }
  .el-tabs__header {
    position: absolute;
    width: calc(100% - 40px);
    z-index: 999;
    // height: 60px;
    box-sizing: border-box;
    top: 55px;
    padding: 18px 0 0 0;
    background-color: #ffffff;
    box-shadow: 0 8px 28px 0 rgba(192, 206, 226, 0.13);
  }
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
  }
  .el-form-item__label {
    position: relative;
    right: 5px;
  }
  .el-form {
    padding-right: 0px !important;
  }

  .el-dialog__body {
    // overflow: hidden;
    // height: 550px !important;
    max-height: calc(70vh - 124px);
    overflow: auto;
  }
  .el-input-group__append {
    color: #999 !important;
  }
}
.tiptext {
  font-size: 12px;
  color: red;
  float: right;
  margin: 15px 0;
}
.bxitem {
  margin-bottom: 20px;
}

.bxjsinfo {
  margin-top: 60px;
  width: 100%;
}
.title-head {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
  &::before {
    content: '';
    display: block;
    width: 3px;
    height: 20px;
    background-color: #4c68ef;
    margin-right: 10px;
  }
}
</style>
